<template>
  <div class="container">
    <div class="app-container" style="padding-top: 20px;">
      <el-button type="primary" size="small" @click="onAddPerm(1,0)">添加权限</el-button>
      <el-table row-key="id" :data="tableList" :header-cell-style="{background:'#f5f6f8'}" style="width: 100vw;margin-top: 20px;" border>
        <el-table-column prop="name" width="442" label="名称" />
        <el-table-column prop="code" width="442" label="标识" />
        <el-table-column prop="description" width="442" label="描述" />
        <el-table-column width="442" label="操作">
          <template #default="{row}">  <!-- 子级的type都是2，一级的是1，自己是没有添加按钮的 -->
            <el-button v-if="row.type === 1" type="text" @click="onAddPerm(2,row.id)">添加</el-button>
            <el-button type="text" @click="onEditPerm(row.id)">编辑</el-button>
            <el-button type="text" @click="onDelPerm(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 点击显示弹出层 -->
    <el-dialog title="新增权限点" :visible.sync="visible" width="500px">

      <el-form ref="formRef" :model="FormData" :rules="rules" label-width="120px">
        <el-form-item size="small" label="权限名称" prop="name">
          <el-input v-model="FormData.name" />
        </el-form-item>
        <el-form-item size="small" label="权限标识" prop="code">
          <el-input v-model="FormData.code" />
        </el-form-item>
        <el-form-item size="small" label="权限描述" prop="description">
          <el-input v-model="FormData.description" type="textarea" />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="FormData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <template>
        <el-row type="flex" justify="center">
          <el-button size="small" type="primary" @click="onsubmit">确定</el-button>
          <el-button size="small" @click="visible = false">取消</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>
<!-- 1.添加子级表格嵌套
  1.想赢回来的数据要转为树形结构
  2.渲染table是多加一个 row-key=‘id’ 自动渲染子级
  3.一级和二级的区别是type一级等于1，二级等于2
 -->

 <!-- 1.新增全局权限

  -->
<script>
import { addPermAPI, assignPermAPI, delPermAPI, getPerMsAPI, getPermDetailAPI } from '@/api/permission'
import { convertToTree } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      tableList: [],
      visible: false,
      FormData: {
        name: '',
        code: '',
        description: '',
        type: null,
        pid: null,
        enVisible: false // 0开启，1关闭
      },
      rules: {
        name: [
          { required: true, message: '输入不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '输入不能为空', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '输入不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    visible(newValue) {
      if (!newValue) {
        this.$refs.formRef.resetFields()
        this.FormData = {
          name: '',
          code: '',
          description: '',
          type: null,
          pid: null,
          enVisible: false // 0开启，1关闭
        }
      }
    }
  },
  created() {
    this.onloadPerMs()
  },
  methods: {
    // 获取权限列表
    async onloadPerMs() {
      const { data } = await getPerMsAPI() // 因为表格是嵌套的有子级，数据要转换为树状结构数据
      // console.log('data  --->', data)
      this.tableList = convertToTree(data, 0)
    },
    // 添加界面权限和按钮权限
    onAddPerm(type, id) {
      this.visible = true
      this.FormData.type = type
      this.FormData.pid = id
    },
    // 表单提交
    async onsubmit() {
      if (this.FormData.id) {
        await assignPermAPI(this.FormData)
        this.$message.success('修改权限成功')
        this.visible = false
        this.onloadPerMs()
        return
      }
      await this.$refs.formRef.validate()
      await addPermAPI(this.FormData)
      this.$message.success('添加权限成功')
      this.visible = false
      this.onloadPerMs()
    },
    // 获取详情
    async onEditPerm(id) {
      const { data } = await getPermDetailAPI(id)
      this.FormData = data
      this.visible = true
    },
    // 删除权限
    async onDelPerm(id) {
      await this.$confirm('确认删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delPermAPI(id)
      this.$message.success('删除成功')
      this.onloadPerMs()
    }
  }
}
</script>
